<template>
	<view class="nl-shadow-box nl-box-padding">
		<!-- 搜索 -->
		<view class="nl-search-box">
			<view class="search">
				<u-icon class="icon" name="search" color="#D1D1D1" size="40"></u-icon>
				<u-input v-model="inputdata" class="input" type="text" placeholder="输入楼栋编号" />
				<view class="button" @click="searchfloor()">搜索</view>
			</view>
		</view>
		<!-- 内容 -->
		<view v-if="hasNet">
			<view class="list-box" v-if="hasInfo">
				<view class="nl-flex-list active" v-for="(item,index) in data" :key="index"
				@click="floorback(item.floorName,item.floorId)">
					<view class="icon"></view>
					<text>{{item.floorName}}</text>
				</view>
			</view>
			<view v-else>
				<noData noDataText="暂无数据"></noData>
			</view>
		</view>
		<view v-else>
			
			<netError v-if="!hasNet" @refresh="refresh()"></netError>
		</view>
	</view>
</template>

<script>
	import {getQueryFloors} from "@/api/common"
	import {
		mapState 
	} from 'vuex';
	export default {
		data() {
			return {
				data:[],
				// data:['1栋','2栋','3栋','4栋','5栋','6栋','7栋','8栋'],
				//输入到搜索框的数据
				inputdata:"",
				//要发送的参数
				floor:{},
				//判断是否有数据
				hasInfo:true,//是否有数据
				//请求发送的参数
				hasNet:true, //是否有网络
				param:{
					communityId:'',
					floorNum:'',
					page:'',
					row:''
				}
			}
		},
		onLoad() {
			uni.showLoading({
				title:'加载中'
			})
			this.getQueryFloors(
			{
				communityId:this.userCommunity.communityId,//小区编号 
				floorNum:"",//楼段号
				page:1,
				row:10
			})
		},
		//下拉刷新
		onPullDownRefresh(){
			uni.showLoading({
				title:'加载中'
			})
			this.getQueryFloors(
			{
				communityId:this.userCommunity.communityId,//小区编号 
				floorNum:"",//楼段号
				page:1,
				row:10
			})
			this.inputdata=''
		}
		,
		computed: {
			...mapState('user', ['userInfo', 'userCommunity'])
		},
		methods: {
			getQueryFloors(param){
				getQueryFloors(param).then((res)=>{
					this.hasNet=true
					//判断有没有这个属性
					if(res.hasOwnProperty('apiFloorDataVoList')){
						//判断这个属性的数据是否有值
						if(res.apiFloorDataVoList.length===0){
							this.hasInfo=false
						}else{
							this.data=res.apiFloorDataVoList;
							this.hasInfo=true
						}
					}else{
						this.hasInfo=false
					}
					//过滤掉0号楼
					this.data=this.data.filter((dat)=>{
						return dat.floorName!="0号楼"
					})
					uni.hideLoading();
					uni.stopPullDownRefresh()
				}).catch((err)=>{
					this.hasNet=false
					uni.hideLoading();
					uni.stopPullDownRefresh()
				})
				
				
			},
			//点击按钮搜索
			searchfloor(){
				uni.showLoading({
					title:'加载中'
				})
				this.getQueryFloors({
				communityId:this.userCommunity.communityId,//小区编号 
				floorNum:this.inputdata,
				page:1,
				row:10
			})
			},
			//点击刷新页面
			refresh(){
				uni.showLoading({
					title:'加载中'
				})
				this.getQueryFloors({
				communityId:this.userCommunity.communityId,//小区编号 
				floorNum:"",//楼段号
				page:1,
				row:10
			})
			},
			floorback(floorName,floorId){
				let pages = getCurrentPages();
				let nowPage = pages[pages.length - 1]
				let prePage = pages[pages.length - 2]
				prePage.$vm.data.floor = floorName
				prePage.$vm.data.floorid = floorId
				prePage.$vm.data.unit=''
				prePage.$vm.data.unitid=''
				prePage.$vm.data.house=''
				prePage.$vm.data.roomid=''
				
				uni.navigateBack({
					delta: 1
				})
			}
	     }
	}
</script>

<style lang="scss">
	.nl-shadow-box{
		margin-bottom: 40rpx;
		padding-bottom: 20rpx;
	}
	.wrap {
		padding: 24rpx;
	}	
	
	.item {
		padding: 24rpx 0;
		color: $u-content-color;
		font-size: 28rpx;
	}
	
	.nl-search-box {
		padding: 20rpx 0;
		border-bottom: 2rpx solid $uni-bg-color-grey;
	
		.search {
			height: 72rpx;
			display: flex;
			align-items: center;
			position: relative;
			border-radius: 8rpx;
			overflow: hidden;
			background-color: #F3F3F3;
		}
	
		.icon {
			margin: 0 16rpx 0 24rpx;
		}
		
		.input {
			flex: 1;
			font-size: $uni-font-size-base;
			margin-right: 15rpx;
		}
	
		.button {
			width: 140rpx;
			line-height: 72rpx;
			margin-left: auto;
			text-align: center;
			color: #FFFFFF;
			user-select: none;
			font-size: $uni-font-size-base;
			background-color: $nl-color-main;
		}
	
		.button:active {
			background-color: #0f70d6;
		}
	}
	
	.list-box {
		width: 100%;
		// padding-bottom: 20rpx;
		.nl-flex-list{
			.icon {
				width: 28rpx;
				height: 28rpx;
				background-image: url(../../../static/roomquery/ld.png);
				background-size: 100% 100%;
				background-repeat: no-repeat;
				margin-right: 16rpx;
			}
		}
		
		.name{
			flex: 1;
			margin-right: 16rpx;
		}
		
		.right-grey{
			font-size: $uni-font-size-sm;
			text-align: right;
		}
	}
</style>
